<template>
    <div class="card content-box" :style="{ minHeight: clientHeight + 'px' }">
        <el-form  ref="ruleFormRef" :model="formData" label-width="140px">
            <el-form-item label="活动名称:">
                <el-input v-model="formData.name" placeholder="请输入活动名称" />
            </el-form-item>
            <el-form-item label="活动区:">
                <el-select v-model="formData.region" placeholder="请选择活动地区">
                    <el-option label="Zone one" value="shanghai" />
                    <el-option label="Zone two" value="beijing" />
                </el-select>
            </el-form-item>
            <el-form-item label="活动时间:">
                <el-date-picker v-model="formData.date1" type="date" placeholder="选择一个日期" />
                    <el-col :span="1" class="text-center">
                        <span class="text-gray-500">-</span>
                    </el-col>
                <el-time-picker v-model="formData.date2" placeholder="选择一个时间" />
            </el-form-item>
            <el-form-item label="即时交货:">
                <el-switch v-model="formData.delivery" />
            </el-form-item>
            <el-form-item label="活动类型:">
                <el-checkbox-group v-model="formData.type">
                    <el-checkbox label="线上活动" name="type" />
                    <el-checkbox label="促销活动" name="type" />
                    <el-checkbox label="线下活动" name="type" />
                    <el-checkbox label="简单品牌曝光" name="type" />
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="资源:">
                <el-radio-group v-model="formData.resource">
                    <el-radio label="赞助" />
                    <el-radio label="场地" />
                </el-radio-group>
            </el-form-item>
            <el-form-item label="活动形式:">
                <el-input v-model="formData.desc" type="textarea" placeholder="请输入活动形式"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">确定</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts" name="basicForm">
import { reactive, ref} from "vue";
import { ElMessage } from "element-plus";

const formData = reactive({
    name: "",
    region: "",
    date1: "",
    date2: "",
    delivery: false,
    type: [],
    resource: "",
    desc: ""
});

const onSubmit = () => {
    ElMessage.success("提交的数据为 : " + JSON.stringify(formData));
};
const clientHeight = document.body.clientHeight - 106
</script>

<style scoped lang="scss">
.content-box{
    width: 100%;
}
.el-form {
  width: 100%;
  .text-center {
    text-align: center;
  }
}

</style>
